<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>-->
    <script src="./konva.min.js"></script>
    <!--    <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>-->
    <script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>
    <style>
        html, body {
            background-color: transparent;
        }

        #konva {
            width: 100%;
            height: 100%;
            background-color: transparent;
        }
    </style>
</head>
<body>
<div id="konva">
</div>
<script>
    document.addEventListener('UniAppJSBridgeReady', function () {
        // 向应用发送消息
        uni.postMessage({
            data: {
                order: 'playRecord'
            }
        });
    });
    window.msgFromUniapp = function (arg) {
        LoadImageAndDraw(arg)
    }
    var width = 680
    var height = 500
    var urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.get('url'),'url')
    function drawImage(imageObj, type) {
        var message = false;
        var scale = 1
        if (urlParams.has('message')) {
            message = urlParams.get('message');
        }
        if (urlParams.get('scale')) {
            scale = urlParams.get('scale')
        }
        if (type) {
            if (type.type === 'scale') {
                console.log('is scale')
                scale = type.value
            } else if (type.type === 'message') {
                console.log('is message')
                message = type.value
            }
        }
        var stage = new Konva.Stage({
            container: 'konva',
            width: width,
            height: height
        });
        var layer = new Konva.Layer();
        var yoda = new Konva.Image({
            x: 180,
            y: 50,
            image: imageObj,
            width: 340 * (scale || 1),
            height: 340 * (scale || 1),
            // width: (width - 120) * (scale || 1),
            // height: (height - 100) * (scale || 1),
            draggable: true
        });

        // add the shape to the layer
        layer.add(yoda);
        stage.add(layer)
        layer.batchDraw();
        if (message === 'true' || message === true) {
            var tr = new Konva.Transformer();
            layer.add(tr);
            tr.attachTo(yoda);
            layer.draw();
        }
    }

    function LoadImageAndDraw(type) {
        var imageObj = new Image();
        imageObj.onload = function () {
            if (type) {
                drawImage(this, type)
            } else {
                drawImage(this)
            }
        };
        if (urlParams.has('imgUrl')) {
            var imgUrl = urlParams.get('imgUrl');
        }
        imageObj.src = imgUrl;

    }
    LoadImageAndDraw()

</script>
</body>
</html>
